<template>


  <div id="permissionSetList">

    <el-row>
      <!-- 左边项目 -->
      <el-col :span="6">
        <div class="grid-content gridLeft">
          <h4>项目列表</h4>
          <el-row>
            <div class="userHandle">
              <el-button type="primary" icon="el-icon-circle-plus-outline" round @click.native="openAddProject"
                         size="mini">
                新增
              </el-button>
              <el-button type="success" icon="el-icon-edit" round @click.native="openUpdateProject" size="mini">修改
              </el-button>
              <el-button type="danger" icon="el-icon-delete" round @click.native="deleteProject" size="mini">删除
              </el-button>
            </div>
          </el-row>
          <el-tree :data="projectTreeData" :props="projectProps" @node-click="projectTreeClick"
                   default-expand-all highlight-current></el-tree>
        </div>
      </el-col>

      <!-- 右边用户列表 -->
      <el-col :span="18">
        <div class="grid-content gridRight">
          <h4>用户列表</h4>
          <!-- 列表工具栏 -->
          <el-row class="userHandle">
            <div class="cf handleLeft">
              <el-button type="primary" icon="el-icon-circle-plus-outline" round @click.native="openAddUser"
                         size="mini">
                新增
              </el-button>
              <el-button type="danger" icon="el-icon-delete" round @click.native="deleteUser" size="mini">删除
              </el-button>
            </div>
            <div class="cf handleRight">
              <el-input v-model="searchUserName" placeholder="请输入用户名称" clearable>
              </el-input>
              <el-button type="primary" icon="el-icon-search" round @click.native="searchUserList" size="mini">搜索
              </el-button>
              <el-button type="info" icon="el-icon-refresh" round @click.native="resetUserList" size="mini">重置
              </el-button>
            </div>
          </el-row>

          <!-- 用户列表数据 -->
          <el-table
            :data="userDataList"
            style="width: 100%" highlight-current-row @row-click="userListClick">
            <el-table-column
              prop="sysUserAccount"
              label="用户账号"
              align="center">
            </el-table-column>
            <el-table-column
              prop="sysUserName"
              label="用户名称"
              align="center">
            </el-table-column>
            <el-table-column
              prop="isLockedStr"
              label="是否可用"
              align="center"
              :formatter="formatIsLocked">
            </el-table-column>
          </el-table>
          <el-pagination
            layout="prev, pager, next"
            :page-sizes="[5]"
            :current-page="userListPageNo"
            :page-size="userListPageSize"
            :total="userListPageTotal"
            @current-change="currentChangeUserListPage">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <!-- 项目弹窗 -->
    <el-dialog title="项目信息" :visible.sync="projectInfoDialog">
      <el-form :model="projectForm" ref="projectForm" label-position="left">
        <el-form-item label="项目名称" :label-width="formLabelWidth" prop="projectInfoName"
                      :rules="{required: true, message: '项目名称不能为空', trigger: 'blur'}">
          <el-input v-model="projectForm.projectInfoName" autocomplete="off" placeholder="项目名称"></el-input>
        </el-form-item>
        <el-form-item label="项目内容" :label-width="formLabelWidth">
          <el-input v-model="projectForm.projectInfoContent" autocomplete="off" placeholder="项目内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="projectInfoDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdateProject('projectForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 选择用户弹窗 -->
    <el-dialog title="用户列表" :visible.sync="relateUserInfoDialog">
      <el-table
        :data="relateUserList"
        @select="handleCurrentChange"
        @select-all="handleCurrentChangeAll"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="sysUserAccount"
          label="用户账号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="sysUserName"
          label="用户名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="isLockedStr"
          label="是否可用"
          align="center"
          :formatter="formatIsLocked">
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        :page-sizes="[5]"
        :current-page="relateUserListPageNo"
        :page-size="relateUserListPageSize"
        :total="relateUserListPageTotal"
        @current-change="currentChangeRelateUserListPage">
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="relateUserInfoDialog = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </div>

    </el-dialog>


  </div>


</template>


<script>
  import api from "@/assets/js/project/permission_set_list.js";
  import common from "@/assets/js/common/common.js";

  export default {
    data() {
      return {
        userDataList: [],//用户数据列表
        userListPageTotal: 0,//用户列表总数
        userListPageSize: 10, //用户每页显示的数据量
        userListPageNo: 1,//用户分页的当前页
        projectTreeData: [],//树形项目数据
        //树形项目定义的格式对应关系
        projectProps: {
          label: 'projectInfoName'
        },
        projectInfoDialog: false, //项目窗口状态属性
        //项目信息表单
        projectForm: {
          projectInfoId: null,
          projectInfoName: null,
          projectInfoContent: null
        },
        formLabelWidth: '120px', //全部form宽度
        //用户列表搜索变量
        searchUserName: "",
        //关联用户弹窗
        relateUserInfoDialog: false,
        //关联用户列表
        relateUserList: [],
        relateUserListPageTotal: 0,//用户列表总数
        relateUserListPageSize: 10, //用户每页显示的数据量
        relateUserListPageNo: 1,//用户分页的当前页
        relateUserForm: {
          projectInfoId: null,
          sysUserIdStr: null
        },
        //删除用户关联的表单
        delRelForm: {
          delRelSysUserId: null,
          delRelSysUserName: null
        },
      }
    },
    mounted: function () {
      //获取项目数据
      this.getProjectList();
    },
    methods: {
      /**
       * 根据工程id获取用户分页列表数据
       * */
      getSysUserPageWithPro(param) {
        api.getSysUserPageWithPro(param).then((res) => {
          if (res.data == null || res.data.list == null) {
            this.userDataList = null;
            return;
          }
          this.userDataList = res.data.list;
          this.userListPageTotal = parseInt(res.data.total);//页总数
          this.userListPageNo = parseInt(res.data.pageNum);//当前页
        });
      },
      /**
       * 获取需要关联用户分页列表数据
       * */
      getRelateSysUserPage(param) {
        api.getSysUserPage(param).then((res) => {
          if (res.data == null || res.data.list == null) {
            this.relateUserList = null;
            return;
          }
          // console.log("relateUserList", res.data);
          this.relateUserList = res.data.list;
          this.relateUserListPageTotal = parseInt(res.data.total);//页总数
          this.relateUserListPageNo = parseInt(res.data.pageNum);//当前页
        });
      },
      /**
       * 分页组件-改变当前页事件监听
       * */
      currentChangeUserListPage(val) {
        this.getSysUserPageWithPro({
          pageNo: val,
          pageSize: this.userListPageSize,
          projectInfoId: this.projectForm.projectInfoId
        });
      },
      /**
       * 根据用户列表的数据转换
       * */
      formatIsLocked(row) {
        return this.getLockedEnumMsg(row.isLocked);
      },
      /**
       * 根据枚举值获取锁定状态的枚举信息
       * */
      getLockedEnumMsg(value) {
        var msg = "";
        switch (value) {
          case 1:
            msg = "可用";
            break;
          case 2:
            msg = "锁定";
            break;
          case "1":
            msg = "可用";
            break;
          case "2":
            msg = "锁定";
            break;
          default:
            break;
        }
        return msg;
      },
      /**
       * 搜索用户列表
       * */
      searchUserList() {
        var param = {
          pageNo: 1,
          pageSize: 10,
          projectInfoId: this.projectForm.projectInfoId,
          sysUserName: this.searchUserName
        };
        this.getSysUserPageWithPro(param);
      },
      /**
       * 重置用户列表
       * */
      resetUserList() {
        this.searchUserName = "";
        var param = {
          pageNo: 1,
          pageSize: 10,
          projectInfoId: this.projectForm.projectInfoId
        };
        this.getSysUserPageWithPro(param);
      },
      /**
       * 获取项目树列表
       * */
      getProjectList() {
        api.getProjectList().then((res) => {
          // console.log(res.data);
          this.projectTreeData = res.data;
        });
      },
      /**
       * 项目树点击事件
       * */
      projectTreeClick(data) {
        this.userListPageNo = 1;
        this.getSysUserPageWithPro({
          pageNo: this.userListPageNo,
          pageSize: this.userListPageSize,
          projectInfoId: data.projectInfoId
        });
        //项目表单里面的deptId赋值
        this.projectForm.projectInfoId = data.projectInfoId;
        this.projectForm.projectInfoName = data.projectInfoName;

      },
      /**
       * 打开新增项目
       * */
      openAddProject() {
        //清空表单数据
        this.projectForm = {};
        this.projectInfoDialog = true;
      },
      /**
       * 保存项目信息
       * */
      saveOrUpdateProject(formName) {
        this.$refs[formName].validate((valid) => {
          if (!valid) {
            //console.log('error submit!!');
            return false;
          }
          if (this.projectForm.projectInfoId == null) {
            this.addProject();
          } else {
            this.updateProject();
          }
        });
      },
      /**
       * 新增项目
       * */
      addProject() {
        api.saveProject(this.projectForm).then((res) => {
          this.getProjectList();//重新加载树形数据
          common.generalMessage(res); //提示框信息
          this.projectInfoDialog = false; //关闭弹窗
        });
      },
      /**
       * 根据项目id打开弹窗
       * */
      openUpdateProject() {
        if (this.projectForm.projectInfoId == null) {
          common.message("请选择需要修改的项目", "warning");
          return;
        }
        this.projectInfoDialog = true;
      },
      /**
       * 更新项目
       * */
      updateProject() {
        api.updateProject(this.projectForm).then((res) => {
          this.getProjectList();//重新加载树形数据
          common.generalMessage(res); //提示框信息
          this.projectInfoDialog = false; //关闭弹窗
        });
      },
      /**
       * 删除项目
       * */
      deleteProject() {
        if (this.projectForm.projectInfoId == null) {
          common.message("请选择需要删除的项目", "warning");
          return;
        }
        this.$confirm("确认是否删除项目【" + this.projectForm.projectInfoName + "】", "是否继续?", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.deleteProject({
            projectInfoId: this.projectForm.projectInfoId
          }).then((res) => {
            this.getProjectList();//重新加载树形数据
            common.generalMessage(res); //提示框信息
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },
      /**
       * 用户列表点击事件
       * */
      userListClick(row) {
        this.delRelForm.delRelSysUserId = row.sysUserId;
        this.delRelForm.delRelSysUserName = row.sysUserName;
      },
      /**
       * 打开关联用户窗口
       * */
      openAddUser() {
        if (this.projectForm.projectInfoId == null) {
          common.message("请选择需要关联用户的项目", "warning");
          return;
        }
        this.relateUserListPageNo = 1;
        this.getRelateSysUserPage({
          pageNo: this.relateUserListPageNo,
          pageSize: this.relateUserListPageSize,
          projectInfoId: this.projectForm.projectInfoId
        });
        this.relateUserInfoDialog = true;
      },
      /**
       * 关联用户窗口的列表单个勾选事件
       * */
      handleCurrentChange(selection, row) {
        this.relateUserForm.projectInfoId = this.projectForm.projectInfoId;
        this.relateUserForm.sysUserIdStr = "";
        for (let i = 0; i < selection.length; i++) {
          this.relateUserForm.sysUserIdStr += selection[i].sysUserId + ",";
        }
      },
      /**
       * 关联用户窗口的列表全选事件
       * */
      handleCurrentChangeAll(selection) {
        this.relateUserForm.projectInfoId = this.projectForm.projectInfoId;
        this.relateUserForm.sysUserIdStr = "";
        for (let i = 0; i < selection.length; i++) {
          this.relateUserForm.sysUserIdStr += selection[i].sysUserId + ",";
        }
      },
      /**
       * 新增用户关联
       * */
      addUser() {
        if (this.relateUserForm == null) {
          return;
        }
        if (this.relateUserForm.projectInfoId == null) {
          return;
        }
        if (this.relateUserForm.sysUserIdStr == null) {
          return;
        }
        api.saveRelUser(this.relateUserForm).then((res) => {
          common.generalMessage(res); //提示框信息
          this.getSysUserPageWithPro({
            pageNo: 1,
            pageSize: this.userListPageSize,
            projectInfoId: this.projectForm.projectInfoId
          });
          this.relateUserInfoDialog = false;
        });
      },
      /**
       * 删除用户关联
       * */
      deleteUser() {
        if (this.delRelForm.delRelSysUserId == null) {
          common.message("请选择你需要删除关联的用户信息", "warning");
          return;
        }
        if (this.projectForm.projectInfoId == null) {
          common.message("请选择你需要删除关联的项目信息", "warning");
          return;
        }

        this.$confirm("确认是否删除关联用户【" + this.delRelForm.delRelSysUserName + "】", "是否继续?", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.deleteRelUser({
            projectInfoId: this.projectForm.projectInfoId,
            sysUserId: this.delRelForm.delRelSysUserId
          }).then((res) => {
            common.generalMessage(res); //提示框信息
            this.resetUserList();//重置当前用户列表
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },
      /**
       * 关联用户窗口分页
       * */
      currentChangeRelateUserListPage(val) {
        this.getRelateSysUserPage({
          pageNo: val,
          pageSize: this.relateUserListPageSize,
          projectInfoId: this.projectForm.projectInfoId
        });
      }
    }
  }
</script>


<style lang="scss">
  #permissionSetList {
    .cf:after, .cf::after {
      content: '';
      display: block;
      clear: both;
    }

    .el-col {
      border-radius: 4px;
    }

    .grid-content {
      margin: 30px;
      border-radius: 4px;
      background: white;
      padding-bottom: 20px;

      h4 {
        border-bottom: 2px solid #F1F1F1;
        margin: 0 20px;
        padding: 10px 0;
      }

      .userHandle {
        padding: 15px 20px;
        line-height: 40px;

        .handleLeft {
          float: left;
        }

        .handleRight {
          float: right;
        }
      }

      .el-button.is-round {
        border-radius: 6px;
      }

      .el-input {
        width: auto
      }
    }

    .gridLeft {
      margin-right: 2px;

      .el-tree {
        display: inline-block;
        width: 70%;
      }
    }

    .gridRight {
      margin-left: 2px;

      .el-pagination {
        margin-top: 20px;
      }
    }

    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  }

</style>


